<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<meta name="robots" content="noindex, nofollow" />
<link rel="shortcut icon"
	href="${pageContext.request.contextPath}/images/favicon.ico" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/reset.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/styles.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/plugin/css/jquery-ui.css" />

<script language="javascript" type="text/javascript"
	src="${pageContext.request.contextPath}/js/course-details.js"></script>
<script language="javascript" type="text/javascript"
	src="${pageContext.request.contextPath}/js/common.js"></script>

<script language="javascript" type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.9.0.min.js"></script>
<script language="javascript" type="text/javascript"
	src="${pageContext.request.contextPath}/plugin/js/jquery-ui.js"></script>
<script language="javascript" type="text/javascript"
	src="${pageContext.request.contextPath}/plugin/js/nicEdit.js"></script>
<script type="text/javascript">
	bkLib.onDomLoaded(function() {
		new nicEditor({
			fullPanel : true
		}).panelInstance('course_overview');
		new nicEditor({
			fullPanel : true
		}).panelInstance('course_objective');
		new nicEditor({
			fullPanel : true
		}).panelInstance('post_training_sup');
	});
</script>

<script type="text/javascript">
	function previousSubmit() {
		//var nicE = new nicEditors.findEditor('preRequisite');
		//alert("PRE "+nicE.getContent());
		document.getElementById("action").value = "viewCourseAgenda";
		document.forms[0].submit();
	}

	function nextSubmit() {
		//var nicE = new nicEditors.findEditor('preRequisite');
		//alert("PRE "+nicE.getContent());
		document.getElementById("action").value = "submitCourse";
		document.forms[0].submit();
	}
</script>

<form:form action="${pageContext.request.contextPath}/usr/course"
	commandName="courseDetailsBean" method="POST"
	id="courseDetailsBean">

	<form:hidden path="courseId" />

	<!-- Right Area -->
	<div class="right-area">
		<div class="left-arrow">
			<img src="images/arrow-left.png" width="11" height="16" alt="" />
		</div>
		<div class="container">
			<div class="content">
				<div class="header">
					<h1><c:out value="${courseDetailsBean.title}" /></h1>
					<h2>Web Technology</h2>
					<h3>
						<span class="hd">Date:</span>
						<ul>
							<!-- <li>24<sup>th</sup> March 2013
							</li>-->
							<li><c:out value="${courseDetailsBean.dateFrom}" /><c:out value="${courseDetailsBean.dateTo}" /><li>
						</ul>
					</h3>
					<h3>
						<span class="hd">City :</span>
						<ul>
							<li><c:out value="${courseDetailsBean.city}" />, <c:out value="${courseDetailsBean.state}" /></li>
						</ul>
					</h3>
					<h3>
						<span class="hd">Address:</span>
						<ul>
							<li><c:out value="${courseDetailsBean.venue}" /></li>
						</ul>
					</h3>
					<h3>
						<span class="hd">Training Type:</span>
						<ul>
							<li><c:out value="${courseDetailsBean.courseType}" /></li>
						</ul>
					</h3>
					<h3>
						<span class="hd">Duration:</span>
						<ul class="social">
							<li class="facebook">2 Months</li>
						</ul>
					</h3>
					<h3>
						<span class="hd">Number of Seats:</span>
						<ul class="social">
							<li class="facebook"><c:out value="${courseDetailsBean.totalSeats}" /></li>
						</ul>
					</h3>
					<h3>
						<span class="hd">Difficulty Level:</span>
						<ul class="social">
							<li class="facebook">Level 4</li>
						</ul>
					</h3>
					<h3>
						<span class="hd">Trainer Name:</span>
						<ul class="social">
							<li class="facebook"><c:out value="${courseDetailsBean.trainerName}" /></li>
						</ul>
					</h3>
				</div>

				<div class="three-column-work-area">
					<div class="tab">
						<ul class="tab-list">
							<li class="btn active first"><a href="javascript:void(0);"
								onclick="showtab1('tabcont1');">General</a></li>
							<li class="btn"><a href="javascript:void(0);"
								onclick="showtab1('tabcont2');">Agenda</a></li>
							<li class="btn"><a href="javascript:void(0);"
								onclick="showtab1('tabcont3');">Trainer Details</a></li>
							<li class="btn"><a href="javascript:void(0);"
								onclick="showtab1('tabcont4');">FAQ</a></li>
							<li class="btn last"><a href="javascript:void(0);"
								onclick="showtab1('tabcont5');">Realted Courses</a></li>
						</ul>
					</div>
					<div class="tab-content" style="margin-bottom: 15px;">
						<div class="cont-tab tabcont1">
							<ul class="list">
								<li class="odd">
									<h2>Overview</h2>
									<div class="content-para">										
										<p class="last"><c:out value="${courseDetailsBean.overview}" /></p>
									</div>
								</li>
								<li class="even">
									<h2>Objectives</h2>
									<div class="content-para">
										<p class="last"><c:out value="${courseDetailsBean.objective}" /></p>
									</div>
								</li>
								<li class="odd">
									<h2>Pre requisite</h2>
									<div class="content-para">
										<p class="last"><c:out value="${courseDetailsBean.preRequisite}" /></p>
									</div>
								</li>
								<li class="even">
									<h2>Target Audience</h2>
									<div class="content-para">
										<p class="last"><c:out value="${courseDetailsBean.targetAudience}" /></p>
									</div>
								</li>
							</ul>
						</div>
						<div class="cont-tab tabcont2">
							<ul class="list">
								<li class="odd">
									<div class="content-para">
										<p class="last"><c:out value="${courseDetailsBean.agenda}" /></p>
									</div>
								</li>
							</ul>
						</div>
						<div class="cont-tab tabcont3">
							<ul class="list">
								<li class="odd">
									<div class="content-para">
										<p class="last"><c:out value="${courseDetailsBean.trainerDetails}" /></p>
									</div>
								</li>
							</ul>
						</div>
						<div class="cont-tab tabcont4">
							<ul class="list">
								<li class="odd">
									<h2>Question 1 here ?</h2>
									<div class="content-para">
										<p class="last">It was popularised in the 1960s with the
											release of Letraset sheets containing Lorem Ipsum passages,
											and more recently with desktop publishing software like Aldus
											PageMaker including versions of Lorem Ipsum.</p>
									</div>
								</li>
								<li class="even">
									<h2>Question 2 here ?</h2>
									<div class="content-para">
										<p class="last">It was popularised in the 1960s with the
											release of Letraset sheets containing Lorem Ipsum passages,
											and more recently with desktop publishing software like Aldus
											PageMaker including versions of Lorem Ipsum.</p>
									</div>
								</li>
							</ul>
						</div>
						<div class="cont-tab tabcont5">
							<table>
								<tr>
									<th class="col20">Course Name</th>
									<th class="col20">Date</th>
									<th class="col20">Fee</th>
									<th class="col20">Number of Enrollment</th>
									<th class="col20">Max Seats</th>
								</tr>
								<tr class="odd">
									<td class="col20">HTML</td>
									<td class="col20">21/03/2013</td>
									<td class="col20 tright">2,500.00</td>
									<td class="col20 tright">25</td>
									<td class="col20 tright">24</td>
								</tr>
								<tr class="even">
									<td class="col20">HTML</td>
									<td class="col20">21/03/2013</td>
									<td class="col20 tright">2,500.00</td>
									<td class="col20 tright">25</td>
									<td class="col20 tright">24</td>
								</tr>
								<tr class="odd">
									<td class="col20">HTML</td>
									<td class="col20">21/03/2013</td>
									<td class="col20 tright">2,500.00</td>
									<td class="col20 tright">25</td>
									<td class="col20 tright">24</td>
								</tr>
								<tr class="even">
									<td class="col20">HTML</td>
									<td class="col20">21/03/2013</td>
									<td class="col20 tright">2,500.00</td>
									<td class="col20 tright">25</td>
									<td class="col20 tright">24</td>
								</tr>
								<tr class="odd">
									<td class="col20">HTML</td>
									<td class="col20">21/03/2013</td>
									<td class="col20 tright">2,500.00</td>
									<td class="col20 tright">25</td>
									<td class="col20 tright">24</td>
								</tr>
								<tr class="even">
									<td class="col20">HTML</td>
									<td class="col20">21/03/2013</td>
									<td class="col20 tright">2,500.00</td>
									<td class="col20 tright">25</td>
									<td class="col20 tright">24</td>
								</tr>
							</table>
						</div>
					</div>
					<div class="tab">
						<ul class="tab-list">
							<li class="right-btn"><a href="ask-question-to-trainer.html">Ask
									Question to Trainer</a><a href="forward-to-your-friends.html">Forward
									to your friends</a><a href="download-agenda.html">Download
									Agenda</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="banner">
			<img src="images/ShakeOut_BannerAds_GetReady_160x600_v8.gif"
				width="161" height="600" alt="" />
		</div>
	</div>
	<!-- Right Area -->


</form:form>